﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        .imgs {
            width: 104%;
            height: 320px;
            border: 1px solid red;
        }

        #loading {
            top: 382px;
            left: 9px;
            width: 104%;
            height: 320px;
            background-color: gray;
            position: absolute;
            background-image: url('bingbing/Loading.gif');
            background-repeat: no-repeat;
        }
    </style>
    <script src="../Resource/JS/jquery-1.10.2.js"></script>
    <script src="../Resource/JS/cookie.js"></script>
</head>
<body>
    <img src="bingbing/7.jpg" style="height: 300px;" />
    <h1>Images</h1>
    <div id="img_container" class="imgs">
    </div>
    <h2>Text</h2>
    <div>
        <p>我是文字</p>
        <p>我是文字</p>
        <p>我是文字</p>
        <p>我是文字</p>
        <p>我是文字</p>
        <p>我是文字</p>
        <p>我是文字</p>
        <p>我是文字</p>
        <p>我是文字</p>
        <p>我是文字</p>
        <p>我是文字</p>
        <p>我是文字</p>
        <p>我是文字</p>
        <p>我是文字</p>
        <p>我是文字</p>
        <p>我是文字</p>
        <p>我是文字</p>
    </div>
    <div id="loading"></div>
</body>
</html>
<script>
    var cookies = new cookies();
    var urls = cookies.getCookie("url");
    if (urls != "") {
        var arr = urls.split(',');
        for (var i = 0; i < arr.length; i++) {
            loadImages(arr[i], loadComplete);
        }
    } else {
        $.ajax({
            url: "WebForm1.aspx",
            data: { tag: "img", ran: Math.random() },
            success: function (d) {
                var _d = eval(d);
                for (var i = 0; i < _d.length; i++) {
                    cookies.addCookie("url", _d[i], false);
                    loadImages(_d[i], loadComplete);
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert("HTTP请求错误代码:" + jqXHR.status + ",描述:" + jqXHR.statusText);
            }
        });
    }


    function loadImages(link, callback) {
        var img = new Image();
        img.style.height = "300px";
        img.style.cssFloat = "left";
        console.log(img.complete);
        img.onload = function () {
            callback(img);
        }

        img.onerror = function () {
            img.src = "bingbing/error.jpg";
        }
        img.src = link;
    }

    function loadComplete(img) {
        $("#img_container").append(img);
        if ($("#loading").css("display") == "none") {
            return;
        }
        //add img src to cookie
        $("#loading").css("display", "none");
    }
</script>